<template lang="html">
  <div  v-loading="loading">
    <div class="bt">
       <el-button type="primary" v-if="!btn" @click="back">返回上一级</el-button>
        <el-button type="success" v-if="this.tabData.afterStatus == '验证通过,待退款'" @click="printCode">打印二维码</el-button>
    </div>
    <dialogVue title="操作" :dialog="verify" @close="changeData" :state="false">
        <slot>
              <el-form :model="pageData" ref="ruleForm" label-width="120px" class="demo-ruleForm">
                    <el-form-item label="验证是否通过">
                      <el-select v-model="pageData.yesNo" placeholder="请选择">
                        <el-option
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="验证结果">
                        <el-input v-model="pageData.verificationResults" placeholder="请输入内容"></el-input>
                    </el-form-item>
                    <el-form-item class="confirm">
                        <el-button type="primary"  @click="verifyupForm('post')">提交</el-button>
                    </el-form-item>
              </el-form>
        </slot>
    </dialogVue>
    <div class="table">
        <h3 class="title">售后订单详情</h3>
        <div class="tab-item" v-for="(item,key,index) in tabData" :key="key" v-show="list[key]" v-if="key != 'afterProducts'">
          <div class="tab-name">{{list[key]}}</div>
          <div class="">
            <a v-if="key == 'tuik'" v-for="(vals,idx) in tabData['tuik']" :key="idx" :href="vals" target="_blank">
              <img :src="vals" alt="" class="img_cla">
            </a>
             <span v-if="key !== 'tuik'" class="tab-val">{{item}}</span>
          </div>
        </div>
        <div v-else>
          <el-collapse>
            <el-collapse-item v-for="(val,ct) in item" :key="ct" class="ct">
                <template slot="title">
                  <span class="info">商品信息({{ct}})</span>
               </template>
               <div v-for="(item,cd) in val" :key="cd" v-if="list.afterProducts[cd]" class="list">
                  <div class="st">
                      <span class="ti">{{list.afterProducts[cd]}}</span>
                      <span v-if="cd !== 'goodsPicture'">{{item}}</span>
                      <span v-if="cd == 'goodsPicture'">
                          <a :href="item" target="_blank">
                              <img :src="item" alt="" class="img_cla">
                          </a>
                      </span>
                  </div>
               </div>
              <div class="va" v-if="num == 1">
                    <el-button type="primary" v-if="val.validationStatus == '0' && tabData.afterStatus == '确定收货'" @click="validation(val.mapdId)">验证货物</el-button>
                    <el-button type="danger" v-if="val.validationStatus == '3'">验证失败</el-button>
                    <el-button type="success" v-if="val.validationStatus == '1'">验证通过</el-button>
              </div>
             </el-collapse-item>
          </el-collapse>
        </div>
    </div>

  </div>
</template>

<script>
import Data from './index.js'
import dialogVue from '@/components/dialog.vue'
import {
  verifyconfirm,
  getdetail
} from "@/api/shoppingCentre/pay_shipments";
export default {
  components : {
    dialogVue
  },
  props:['item','btn'],
  data () {
    return JSON.parse(JSON.stringify(Data))
  },
  created () {

     if (this.item) {
        this.getDetail(this.item)
     } else {
        this.getDetail(JSON.parse(this.$route.query.item))
        this.num = JSON.parse(this.$route.query.num)
      }
  },
  methods : {
    getDetail (id) {
      this.loading  = true
      getdetail (id).then(res=>{
         if (res.data.code == 'OK') {
           this.loading  = false
           this.tabData = res.data.data;
           this.tabData.auditTime = this.switchTime(this.tabData.auditTime)
           this.tabData.refundTime = this.switchTime(this.tabData.refundTime)
           if (this.tabData.afterStatus == -1) {
             this.tabData.afterStatus = '拒绝'
           }
           if (this.tabData.afterStatus == -2) {
             this.tabData.afterStatus = '验证失败'
           }
           if (this.tabData.afterStatus == -3) {
             this.tabData.afterStatus = '审核未通过,用户重新提交'
           }
           if (this.tabData.afterStatus == -4) {
             this.tabData.afterStatus = '用户取消'
           }
          if (this.tabData.afterStatus == 0) {
             this.tabData.afterStatus = '未审核'
          }
          if (this.tabData.afterStatus == 1) {
            this.tabData.afterStatus = '审核通过'
          }
          if (this.tabData.afterStatus == 2) {
            this.tabData.afterStatus = '待用户发货'
          }
          if (this.tabData.afterStatus == 3) {
            this.tabData.afterStatus = '用户已发货,待收货'
          }
          if (this.tabData.afterStatus == 4) {
            this.tabData.afterStatus = '确定收货'
          }
          if (this.tabData.afterStatus == 5) {
            this.tabData.afterStatus = '验证通过,待退款'
          }
          if (this.tabData.afterStatus == 6) {
            this.tabData.afterStatus = '退款完成'
          }
          if (this.tabData.afterStatus == 7) {
            this.tabData.afterStatus = '退款中'
          }
          if (this.tabData.afterStatus == 8) {
            this.tabData.afterStatus = '部分退款,待退款'
          }
          this.tabData.goodsStatus = this.tabData.goodsStatus == '0' ? '已收货' : '未收到货'
          this.tabData.refundType= this.tabData.refundType == '1' ? '退货退款' : '仅退款'
           this.tabData['tuik'] = [];
           this.tabData.refundPictures.split(',').map(item=>{
              if(item == '') {
                return false
              } else {
                this.tabData['tuik'].push(item);
              }
           })
         }
      })
    },
    changeData (data) {
      this.verify = data;
    },
    validation (data) {
      this.mapdId = data;
      this.verify = true;
    },
    verifyupForm () {//验证货物确定
      var data = {
        mapdId : this.mapdId,
        yesNo : this.pageData.yesNo,
        verificationResults : this.pageData.verificationResults,
      }
      verifyconfirm(data).then(res=>{
        if (res.data.code == 'OK') {
           this.verify = false,
          this.getDetail()
           this.$message.success('审核成功');
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    back () {
      this.$router.push({
        name : 'afterAdmin'
      })
    },
    printCode () {

    }
  }
}
</script>

<style scoped>
  @import "../../../../../styles/common.css";
  .bt {
    margin: 20px 0;
  }
  #OrderDetails{
      width:100%;
      height: 100%;
  }
  .title{
      width: 100%;
      text-align: center;

  }
  .goback{
      margin-top: 15px;
  }
  .table{
      width:800px;
      border: 1px solid #ccc;
      background-color: #fff;
      margin-top: 20px;

  }
  /* .tab-item:last-child{
      border-bottom: 1px solid #ccc;
  } */
  .tab-val{
      display: flex;
      flex-wrap: wrap;
      padding-left: 20px;
      border-left: 1px solid #ccc;
      box-sizing: border-box;
        min-height: 60px;
      align-items: center;
      padding-top:10px;

  }
  .tab-item{
      width: 100%;
      display: flex;
      padding:0 10px;
      box-sizing: border-box;
       border-top: 1px solid #ccc;
      min-height: 60px;
      align-items: center;
  }
  .tab-item .tab-name{
      min-width: 120px;
      min-height: 60px;

      display: flex;
      align-items: center;
  }
  .img_cla {
    width: 200px;
    height: 200px;
    margin: 10px 0;
    margin-left: 5px;
    cursor: pointer;
  }
  .list {
    display: flex;
  }
  .st {
    display: flex;
    width: 100%;
    border-bottom: 1px solid #ccc;
    min-height: 60px;
    line-height: 60px;
    text-indent: 10px;
    font-size: 16px;
  }
  .ti {
    border-right: 1px solid #ccc;
    min-width: 130px;
  }
.info {
  width: 100%;
  min-height: 60px;
  /* line-height: 60px; */
  text-indent: 10px;
  font-size: 16px;
  margin-left: 10px;
}
.va {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
